<template>
	<!-- 创建球局 -->
	<view class="content">
		<!-- 添加照片 -->
		<scroll-view scroll-x="true" style="width: 100%" class="padding10-40">
			<u-upload height="200" width="200" name="6" multiple :maxCount="9" :fileList="fileList"
				@afterRead="afterRead">
				<view class="upload-box">  
				      <view class="add-button" @click="addImage">  
				        <text class="add-icon">+</text>  
				      </view>  
				      <text class="upload-text">可添加多张照片</text>  
				    </view>
			</u-upload>
		</scroll-view>


		<!-- 输入框 -->
		<u--form  labelPosition="left"  ref="uForm">
			<view class="inputBox padding10-40">
				<u-form-item @click="toStadiumList()" label="关联认证球场" prop="userInfo.name" borderBottom ref="item1" class="padding10-40"
					labelWidth="300">
					<u--input disabled disabledColor="#ffffff" v-model="model1.userInfo.name" placeholder="请选择关联认证球场" border="none"></u--input>
					<u-icon  slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item borderBottom label="活动时间" prop="userInfo.sex" ref="item1" labelWidth="300">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择活动时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item borderBottom label="活动地点" prop="userInfo.sex" ref="item1" labelWidth="300">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择活动地点"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item borderBottom label="活动类型" prop="userInfo.sex" ref="item1" labelWidth="300">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择活动类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="报名人数范围" prop="userInfo.sex" ref="item1" labelWidth="300">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择报名人数范围"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			
			<view class="inputBox padding10-40">
				<u-form-item label="收费方式" prop="userInfo.name" borderBottom ref="item1" class="padding10-40"
					labelWidth="300">
					<u--input v-model="model1.userInfo.name" placeholder="请选择关收费方式" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item  label="总费用" prop="userInfo.sex" ref="item1" labelWidth="300">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择总费用"
					 	border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>

			<view v-if="status != 3" class="inputBox padding20-40">
				<view class="space-between">
					<u--text   bold size="24" text="公开活动"></u--text>
					<u-switch v-model="value3" ></u-switch>
				</view>
				<u--text lineHeight="50"  size="21" color="#888693" text="开启后,活动将会对外公开展示,让更多的新伙伴加入"></u--text>
				<u-divider></u-divider>
				<view v-if="status == 2">
					<u-form-item  label="选择球队" prop="userInfo.sex" ref="item1" labelWidth="300">
						<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择总费用"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u--text lineHeight="50" size="21" color="#888693" text="选择球队后,该活动将会添加到球队活动中,并在提醒队友加入"></u--text>
					<u-divider></u-divider>
				</view>
				
				<view class="space-between">
					<u--text   bold size="24" text="申请加入"></u--text>
					<u-switch v-model="value3" ></u-switch>
				</view>
				<u--text lineHeight="50"  size="21"color="#888693" text="开启后,活动将会对外公开展示,让更多的新伙伴加入"></u--text>
			</view>
			
			<view  v-if="status == 2" class="inputBox padding10-40">
				<u--text  bold size="24" color="#000000" text="球衣颜色"></u--text>
				<view class="space-between margin-top-3"> 
					<view style="margin-right: 1.5%;"  v-for="(item,index) in colorList" @click="clickColor(index)">
						<view :style="{'border': `2px solid ${item.check ? '#235DFF' : '#F3F4F5'}`}" class="outer-box">
						  <view :style="{'background-color': item.innerColor}" class="inner-box"></view>  
						</view>
						<u--text size="20"  :color="item.check ? '#235DFF' : '#000000'" lineHeight="80" align="center" :text="item.colorText"></u--text>
					</view>
				</view>
				
				    
			</view>
			
			<view v-if="status != 3" class="inputBox padding10-40">
				<u--textarea height="300" border="none" count maxlength="100" v-model="value5" placeholder="请输入内容" ></u--textarea>
			</view>
			
			<view v-if="status != 3" class="inputBox padding20-40">
				<u--text bold size="24" text="活动标签"></u--text>
				<view class="margin-top-2" style="display: flex;">
					<view style="margin-right: 3%;" v-for="item in 3" class="tag">养生局</view>
					<view  class="tag">+</view>
				</view>
			</view>
			
			<view v-if="status != 3" class="inputBox padding20-40">
				<view class="space-between">
					<u--text bold size="24" text="自动退出"></u--text>
					<view style="display: flex;">
						<u--text bold size="24" text="不设置"></u--text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</view>
				</view>
			
				<u--text lineHeight="50" size="21" color="#888693" text="开启后,活动将会对外公开展示,让更多的新伙伴加入"></u--text>
			</view>
			
			<view class="inputBox padding10-40">
				<u-form-item label="手机号码" prop="userInfo.name" ref="item1" class="padding10-40"
					labelWidth="300">
					<u--input v-model="model1.userInfo.name" placeholder="请选择手机号码" border="none"></u--input>
				</u-form-item>
			</view>
			
			<view style="width: 70%; height: 40%; margin: 3% auto;" class="padding10-40">
				<u-button size="large" shape="circle" color="#4A43EC" :text="status == 3 ? '直接预定' : '创建比赛'"></u-button>
			</view>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:0, //1：个人创建 2：球队创建 3：直接预定
				value5:'',
				value3:true,
				fileList: [], //图片
				// 颜色
				colorList:[
					{
						innerColor:'#E93325',
						colorText:'红色',
						check:true
					},
					{
						innerColor:'#FDC400',
						colorText:'黄色',
						check:false
					},
					{
						innerColor:'#4A43EC',
						colorText:'蓝色',
						check:false
					},
					{
						innerColor:'#29D697',
						colorText:'绿色',
						check:false
					},
					{
						innerColor:'#000000',
						colorText:'黑色',
						check:false
					},
					{
						innerColor:'#FFFFFF',
						colorText:'白色',
						check:false
					},
					{
						innerColor:'#8C3EF1',
						colorText:'紫色',
						check:false
					},
				]
			}
		},
		onLoad(option) {
			console.log(option);
			if (option.status){
				this.status = option.status
			}
		},
		methods: {
			// 上传照片时
			afterRead(e) {
				console.log(e, '数据');
				this.fileList.push(e.file[0].url)
			},
			
			// 选择颜色
			clickColor(i){
				this.colorList.map((item, index) => {
					item.check = index === i ? true : false
				})
			},
			// 选择认定球场
			toStadiumList(){
				uni.navigateTo({
					url:'/pages/stadium/stadiumList'
				})
			}
		}
	}
</script>

<style>


	.content {
		width: 100%;
		height: auto;
		background-color: #f9f9f9;
	}

	.uploadInfo {
		width: 100px;
		height: 100px;
		border-radius: 12px;
		opacity: 1;
		background: #F3F4F5;
		box-sizing: border-box;
		border: 1px solid #EEEEEE;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.upload-box {  
	  width: 200rpx;  
	  height: 200rpx;  
	  background-color: #F3F4F5; /* 背景颜色 */  
	  border-radius: 16px; /* 圆角 */  
	  display: flex;  
	  flex-direction: column;  
	  justify-content: center;  
	  align-items: center;  
	}  
	
	.add-button {  
	  width: 80rpx;  
	  height: 80rpx;  
	  background-color: #235DFF; /* 按钮的背景颜色 */  
	  border-radius: 30px; /* 圆形按钮 */  
	  display: flex;  
	  justify-content: center;  
	  align-items: center;  
	  color: white; /* 按钮颜色 */  
	  font-size: 30px; /* 按钮文本大小 */  
	}  
	
	.upload-text {  
	  margin-top: 10px;  
	  color: #777; /* 文本颜色 */  
	  font-size: 20rpx; /* 文本大小 */  
	} 

	.weekDate {
		width: 20%;
		height: 70rpx;
		border-radius: 11.22px;
		opacity: 1;
		padding: 50rpx 20rpx;
		background: #4A43EC;
		box-shadow: 0px 4px 10px 0px rgba(83, 89, 144, 0.07);
		display: inline-block;
		margin-left: 30rpx;

	}

	.inputBox {
		width: 80%;
		height: auto;
		border-radius: 16px;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 8px 25px 0px rgba(83, 89, 144, 0.07);
		margin: 3% auto;
	}
	.colorBox{
		width: 62rpx;
		height: 62rpx;
		border: 20rpx solid #F3F4F5;
		background-color: red;
		border-radius: 30%;
	}
	
	.outer-box {  
	  width: 75rpx; /* 外部容器宽度 */  
	  height: 75rpx; /* 外部容器高度 */  
	  border-radius: 20rpx; /* 外部圆角 */  
	  display: flex;  
	  justify-content: center;  
	  align-items: center;  
	  background-color: #F3F4F5;
	}  
	
	.inner-box {  
	  width: 45rpx; /* 内部容器宽度 */  
	  height: 45rpx; /* 内部容器高度 */  
	  border: 2px solid white;
	  border-radius: 15rpx; /* 内部圆角 */  
	  background-color: #7646e3; /* 内部矩形颜色 */  
	}  
</style>